<template>
  <view>
    <view v-if="empty == 'isempty'" class="list">
      <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
      </u-empty>
    </view>

    <view class="section">
      <u-list
        :scrollTop="10"
        height="620"
        :style="height"
        :enableBackToTop="true"
        v-if="empty == 'notempty'"
        :preLoadScreen="page * 5"
        @scrolltolower="scrolltolower"
        :pagingEnabled="true"
      >
        <u-list-item v-for="item in list" :key="item.id">
          <u-swipe-action>
            <u-swipe-action-item
              @click="action"
              :autoClose="true"
              :name="item.id"
              :options="options"
            >
              <view class="card" @click="info(item.id)">
                <view class="left">
                  <view class="img">
                    <u-image
                      :src="item.thumb_text"
                      width="110px"
                      height="110px"
                    >
                      <template v-slot:loading>
                        <u-loading-icon color="red"></u-loading-icon>
                      </template>
                    </u-image>
                  </view>
                </view>
                <view class="right">
                  <view class="text flax">
                    <h5>保险标题 :</h5>
                    <span style="font-size: 15px">{{ item.name }}</span>
                  </view>
                  <view class="text">
                    <span>所属门店:</span>
                    <span>{{ item.store.name }}</span>
                  </view>
                  <view class="text">
                    <span>保险费用费用:</span>
                    <span>{{ item.free }}</span>
                  </view>
                  <view class="text">
                    <span>保险提示:</span>
                    <span class="tips">{{ item.tips }}</span>
                  </view>

                  <view class="text">
                    <span>保险简介1:</span>
                    <span class="jianjie1">{{ item.content1 }}</span>
                  </view>
                </view>
              </view>
            </u-swipe-action-item>
          </u-swipe-action>
        </u-list-item>

        <u-loadmore
          :status="status"
          :loading-text="loadingText"
          :loadmore-text="loadmoreText"
          :nomore-text="nomoreText"
        />
      </u-list>
    </view>

    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>

    <u-modal
      :show="show"
      @confirm="confirm"
      @cancel="cancel"
      showCancelButton
      title="是否确认销毁该保险"
      ref="uModal"
      :asyncClose="true"
    ></u-modal>

    <view class="btnstyle">
      <u-button
        type="primary"
        class="custom-style"
        @click="addinsure"
        text="添加保险"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();
    this.insurelist();
  },

  created() {
    this.timer = setInterval(() => {
      this.$u.count.check();
      this.loadshow = false;
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      count: {},
      qx: "",
      flag: "loading",
      loadingText: "努力加载中",
      loadmoreText: "下拉加载更多",
      nomoreText: "没有更多数据了",
      status: 0,
      loadshow: false,
      show: false,
      auth: {},
      list: [],
      insuredate: [],
      page: 1,
      insureid: 0,
      empty: "",

      options: [
        {
          text: "添加",
          style: {
            backgroundColor: "#1f49d1",
          },
        },
        {
          text: "销毁",
          style: {
            backgroundColor: "#eb615f",
          },
        },
      ],
    };
  },
  methods: {
    scrolltolower() {
      // console.log(655)
      setTimeout(() => {
        this.loadshow = true;
      }, 5000);
      this.insurelist();
    },

    action(item) {
      // 添加
      if (item.index == 0) {
        uni.$u.route({
          url: "/pagesC/product/insure/add",
        });
      }
      // 下架
      if (item.index == 1) {
        this.show = true;
        this.insureid = item.name;
      }
    },
    async confirm() {
      this.show = false;
      let data = {
        adminid: this.auth.id,
        insureid: this.insureid,
      };

      let result = await this.$u.api.hire.insuredestroy(data);

      if (result.code) {
        this.$refs.notice.show({
          type: "success",
          message: result.msg,
          duration: 2000,
        });
        setTimeout(() => {
          this.insurelist();
        }, 600);
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
          duration: 2000,
        });
      }
    },
    cancel() {
      this.show = false;
    },
	// /添加保险
	addinsure()
	{
		uni.$u.route({
          url: "/pagesC/product/insure/add",
        });
	},

    async insurelist() {
      let data = {
        stoid: this.auth.stoid,
        adminid: this.auth.id,
        page: this.page,
      };

      this.loadshow = false;

      let result = await this.$u.api.hire.insurelist(data);

      if (result.code) {
        if (Array.isArray(result.data) && result.data.length > 0) {
          this.empty = "notempty";

          this.list = result.data;
        } else {
          this.flag = "nomore";
          // this.empty = "isempty"
        }
      }
    },

    info(e) {
      //订单详情
      this.$u.route("/pagesC/product/insure/edit", {
        insureid: e,
      });
    },
  },
};
</script>

<style lang="scss">
.btnstyle{
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.list-cell {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 24rpx;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}

.u-tag--mini.data-v-1481d46d {
  width: 38px;
  right: 0;
  top: 3px;
  position: absolute;
}
.section {
  margin: 10px 0px;
}
.card {
  display: flex;
  width: 92%;
  height: 195px;
  margin: 0 auto;
  border-radius: 2%;
  border: 1px solid #eee;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #eee, 2px 2px 2px #eee;

  .left {
    .img {
      padding: 10px;
      height: 120px;
      padding-top: 30px;
    }
  }

  .right {
    width: 72%;
    margin-left: 15px;
    margin-top: 23px;

    .text {
      h5 {
        display: inline-block;
      }

      span {
        font-size: 12px;
        color: #888;
      }

      span:nth-of-type(2) {
        padding-left: 10px;
      }
      .tips {
        // 超出一定长度变成三个点
        width: 250px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
      .jianjie1 {
        // 超出一定长度变成三个点
        overflow: hidden;
        width: 120px;
        // white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
    }
  }
}

.u-cell__label {
  width: 241px;
}

.u-cell__body {
  position: relative;
}

.u-cell__label.data-v-913eaa32 {
  width: 282px;
}

.recordBox {
  height: 100%;
  padding: 0 40rpx;

  .recordItem {
    margin-top: 20rpx;
    background-color: #ffffff;

    .title {
      height: 66rpx;
      padding: 0 20rpx;
      line-height: 66rpx;
      background: #e1e1e1;
      font-size: 32rpx;
      color: #141414;
      text-align: center;
    }

    .contentList {
      display: flex;
      flex-direction: column;
      font-size: 28rpx;
      color: #6d6d6d;

      .contentItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px dashed #c1c1c1;
        height: 66rpx;
        padding: 0 20rpx;
        line-height: 66rpx;
      }
    }

    .showDetail {
      color: #548afb;
      padding: 20rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}
</style>
